<script>
/**
 * @desc 每个收支记录
 */

import { wayMap } from '@/utils'

export default {
  name: 'bill-item',
  props: {
    data: Object
  },
  computed: {
    formateData() {
      const d = this.data
      return {
        ...d,
        name: d.remark ? d.remark : wayMap[d.type][d.way].text,
        moneyText: `${d.type ? '-' : '+'}${d.money.toFixed(2)}`,
        ico: wayMap[d.type][d.way].ico
      }
    }
  }
}
</script>

<template>
  <li :class="$sty.item">
    <img
      :class="$sty.ico"
      :src="formateData.ico"
      mode="aspectFill"
    >
    <p :class="$sty.detail">
      <span :class="$sty.typeName">{{formateData.name}}</span>
      <span
        :class="[$sty.money, formateData.type ? $sty.red : $sty.green]"
      >{{formateData.moneyText}}</span>
    </p>
  </li>
</template>

<style lang="scss" module>
@import './styles.scss';
</style>
